<!--环形图-->
<template>
  <div class="normal-pie w-full h-full" ref="doughnutChart"></div>
</template>

<script lang="ts" setup>
import { defineComponent, markRaw, onMounted, onBeforeUnmount, ref, watch } from 'vue';
import * as echarts from 'echarts';
import { sleep } from '@/utils/sleep.ts';

defineComponent({ name: 'doughnutChartCustom' });

const props = defineProps({
  echartsData: {
    type: Array,
    default: () => {
      return [];
    },
  },
  color: {
    type: Array,
    default: () => {
      return [['rgba(2, 94, 112, 1)', 'rgba(30, 203, 237, 1)'],['rgba(117, 81, 3, 1)', 'rgba(219, 185, 25, 1)']]
    }
  },
  showLabel: {
    type: Boolean,
    default: true
  },
  legendGap: {
    type: Number,
    default: 30
  },
  legendPadding: {
    type: Array,
    default: () => [14, 24]
  },
  borderColor: {
    type: Array,
    default: () => {
      return ['rgba(96, 179, 213, 1)', 'rgba(18, 59, 76, 0.7)', 'rgba(96, 179, 213, 1)']
    }
  }
});

const doughnutChart = ref();
const myChart = ref<any>(null);

function initEcharts(data: any[]) {
  if (myChart.value) destroyEcharts();
  // 标记一个对象，使其永远不会再成为响应式对象
  const color: any[] = props.color || []
  const showLabel = props.showLabel
  const legendGap = props.legendGap
  const legendPadding = props.legendPadding
  const borderColor: any[] = props.borderColor || []
  myChart.value = markRaw(echarts.init(doughnutChart.value));
  data.forEach((item, index) => {
    item.itemStyle = {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: color[index][0],
        },
        {
          offset: 1,
          color: color[index][1],
        }
      ]),
    }
  })
  const option = {
    title: {
      text: "",
      left: "center",
      top: 20,
      textStyle: {
        color: "#ccc",
      },
    },
    legend: {
      itemWidth: 16,
      itemHeight: 16,
      itemGap: legendGap,
      bottom: 0,
      x: 'center',
      textStyle: {
        color: "#fff", // 图例文字颜色
        fontSize: 16
      },
      padding: legendPadding,
      backgroundColor: 'rgba(24, 62, 105, 0.3)'
    },
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c} ({d}%)",
      backgroundColor: 'rgba(0,150,236,0.6)',
      textStyle: {
        color: '#fff',
      },
    },
    series: [
      {
        name: "",
        type: "pie",
        startAngle: 220,
        radius: ["15%", "55%"],
        center: ["50%", "40%"],
        data,
        roseType: "radius",
        label: {
          normal: {
            show: showLabel,
            formatter: "{d}%",
            color: '#fff',
            fontFamily: 'D-DIN-PRO',
            fontSize: 16
          },
        },
        labelLine: {

          normal: {
            show: showLabel,
            lineStyle: {
              color: "#fff",
            },
            smooth: 0.2,
            length: 15,
            length2: 10,
          },
        }
      },
      {
        name: "",
        type: "pie",
        startAngle: 90,
        radius: ["60%", "62%"],
        hoverAnimation: false,
        center: ["50%", "40%"],
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0.05,
                color: borderColor[0],
              },
              {
                offset: 0.5,
                color: borderColor[1],
              },
              {
                offset: 1,
                color: borderColor[2],
              }
            ]),
          },
        },
        data: [
          {
            value: 100,
          },
        ],
      },
    ],
  };

  myChart.value.setOption(option, true);
  window.addEventListener('resize', () => {
    if (myChart.value) myChart.value.resize();
  });
}

function destroyEcharts() {
  if (myChart.value) {
    myChart.value.dispose();
    myChart.value = null;
  }
}

onMounted(() => {
  watch(
    () => props.echartsData,
    async (val: any[]) => {
      await sleep(500);
      if (doughnutChart.value) initEcharts(val);
    },
    { immediate: true, deep: true }
  );
});

onBeforeUnmount(() => {
  destroyEcharts();
});
</script>

<style scoped></style>
